<template>
  <view class="staff-manage-container">
    <z-paging ref="paging" v-model="staffList" @query="loadStaffList">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <uni-search-bar @confirm="search" v-model="searchKeyword" placeholder="搜索员工姓名或手机号" />
      </view>

      <!-- 员工卡片列表 -->
      <view class="staff-cards">
        <view class="staff-card" v-for="staff in staffList" :key="staff.userId">
          <view class="card-header">
            <text class="staff-code">姓名：{{staff.userName}}</text>
            <uni-tag :text="getSexText(staff.sex)" :type="getSexType(staff.sex)" size="small" />
          </view>
          <view class="card-content">
            <view class="info-item">
              <uni-icons type="person" size="16"></uni-icons>
              <text class="info-label">昵称：</text>
              <text class="info-value">{{staff.nickName}}</text>
            </view>
            <view class="info-item">
              <uni-icons type="staff" size="16"></uni-icons>
              <text class="info-label">部门：</text>
              <text class="info-value">{{staff.deptName ? staff.deptName : '未分配部门'}}</text>
            </view>
            <view class="info-item">
              <uni-icons type="phone" size="16"></uni-icons>
              <text class="info-label">岗位：</text>
              <text class="info-value">{{staff.postNames}}</text>
            </view>
            <view class="info-item">
              <uni-icons type="phone" size="16"></uni-icons>
              <text class="info-label">电话：</text>
              <text class="info-value">{{staff.phonenumber}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态提示 -->
      <view class="empty-state" v-if="!staffList || staffList.length === 0">
        <uni-icons type="person-filled" size="50" color="#cccccc"></uni-icons>
        <text class="empty-text">暂无员工数据</text>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { listUser } from "@/api/system/user"
import { listStaff } from "@/api/mes/projectExtend"

export default {
  data() {
    return {
      loading: false,
      staffList: [],
      searchKeyword: '', // 添加搜索关键词变量
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        phonenumber: null,
        status: null,
        deptId: null
      }
    }
  },
  methods: {
    // 加载员工列表数据
    loadStaffList(pageNo, pageSize) {
      this.queryParams.pageNum = pageNo;
      this.queryParams.pageSize = pageSize;
      this.loading = true;
      
      // 显示加载中提示
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      
      // 调用API获取员工数据
      listStaff()
        .then(response => {
          if (response.code === 200) {
            // console.log('获取员工列表成功：', response.data);
            this.$refs.paging.complete(response.data);
          } else {
            throw new Error(response.msg || '获取员工列表失败');
          }
        })
        .catch(error => {
          console.error('获取员工列表失败：', error);
          uni.showToast({
            title: '获取员工列表失败',
            icon: 'none'
          });
          this.$refs.paging.complete([]);
        })
        .finally(() => {
          uni.hideLoading();
          this.loading = false;
        });
    },
    
    // 搜索方法
    search() {
      // 根据输入的关键词设置查询参数
      if (this.searchKeyword) {
        // 判断是否为手机号格式
        if (/^1\d{10}$/.test(this.searchKeyword)) {
          this.queryParams.phonenumber = this.searchKeyword;
          this.queryParams.userName = null;
        } else {
          this.queryParams.userName = this.searchKeyword;
          this.queryParams.phonenumber = null;
        }
      } else {
        // 如果搜索词为空，清空所有搜索条件
        this.queryParams.userName = null;
        this.queryParams.phonenumber = null;
      }
      
      // 重置页码并触发重新加载
      this.$refs.paging.reload();
      this.loading = false;
    },
    
    // 获取性别文本
    getSexText(sex) {
      const sexMap = {
        '1': '女',
        '2': '男',
        '3': '未知'
      };
      return sexMap[sex] || '未知';
    },
    
    // 获取性别标签类型
    getSexType(sex) {
      const typeMap = {
        '1': 'error',  // 女性用红色
        '2': 'primary', // 男性用蓝色
        '3': 'default'  // 未知用灰色
      };
      return typeMap[sex] || 'default';
    }
  }
}
</script>

<style lang="scss" scoped>
.staff-manage-container {
  padding: 20rpx;
  min-height: 100vh;

  .search-bar {
    margin-bottom: 20rpx;
  }

  .staff-cards {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .staff-card {
      background-color: #ffffff;
      border-radius: 12rpx;
      padding: 24rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        padding-bottom: 16rpx;
        border-bottom: 2rpx solid #f0f0f0;

        .staff-code {
          font-size: 28rpx;
          color: #666;
        }
      }

      .card-content {
        .info-item {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .uni-icons {
            margin-right: 12rpx;
            color: #666;
          }

          .info-label {
            font-size: 28rpx;
            color: #666;
            margin-right: 8rpx;
          }

          .info-value {
            font-size: 28rpx;
            color: #333;
            flex: 1;
          }
        }
      }
    }
  }
  
  .empty-state {
    padding: 100rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 12rpx;
    margin-top: 20rpx;
    
    .empty-text {
      margin-top: 20rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style>